<template>
  <div class="user-center">
    <div class="user-detail">
      <div class="user-img">
        <img :src="itemList.avatar">
      </div>
      <div class="user-profile">
        <p class="user-name">{{itemList.nickname}}</p>
        <p class="user-id">ID：{{itemList.id}}</p>
      </div>
    </div>
    <div class="operate-panel">
      <router-link class="operate-item flex" to="/mywawa">
        <div class="flex">
          <img src="../../assets/images/mydolls.png">我的娃娃
        </div>
      </router-link>
      <router-link class="operate-item flex" to="/my-coin">
        <div class="flex">
          <img src="../../assets/images/coins.png">娃娃币
        </div>
        <div class="coins" style="padding-right: 0.54rem;color:#ffb52b;font-size:0.28rem;">{{itemList.coin}}</div>
      </router-link>
      <router-link class="operate-item flex" to="/user-center/account">
        <div class="flex">
          <img src="../../assets/images/charges.png">充值记录
        </div>
      </router-link>
      <router-link class="operate-item flex" to="/user-center/consume">
        <div class="flex">
          <img src="../../assets/images/consume.png">抓取记录
        </div>
      </router-link>
      <router-link class="operate-item flex" to="/order-list">
        <div class="flex">
          <img src="../../assets/images/order.png">订单管理
        </div>
      </router-link>
      <router-link class="operate-item flex" to="/address-list">
        <div class="flex">
          <img src="../../assets/images/address.png">收货地址
        </div>
      </router-link>
    </div>
    <foot :selected="3"></foot>
  </div>
</template>
<script>
import foot from '@/components/tabfoot2';
import api from '@/assets/js/api';
import Wx from '@/assets/js/weixin';
import {updateAccount} from '@/assets/js/utils';//更新用户信息
export default {
  data: function() {
    return {
      itemList: {},
      show_rule: false,
      statusBgColor: "#71C671",
    }
  },
  components: {
    'foot': foot,
  },
  created: function() {
    Wx.hide();
    updateAccount((res) => {
      this.itemList = res;
    })
  },
  mounted () {
    setTimeout(()=>{
      this.setScrollTop(0);
    })
  },
  methods: {
    setScrollTop(scroll_top) {
        document.documentElement.scrollTop = scroll_top;
        window.pageYOffset = scroll_top;
        document.body.scrollTop = scroll_top;
    }
  },
}

</script>
<style scoped lang="less">
.user-center {
  min-height: 100%;
  background-color: #fff;
  padding-bottom: 1rem;
  .user-detail {
    background: url("../../assets/images/mine-bg.png") no-repeat;
    background-size: cover;
    height: 4.52rem;
    padding-top: 0.52rem;
    box-sizing: border-box;
    .user-img {
      width: 1.4rem;
      height: 1.4rem;
      margin: 0 auto;
      border-radius: 50%;
      box-sizing: border-box;
      border: .04rem solid #fff;
      background-color: #e1e4eb;
      overflow: hidden;
      img {
        max-width: 100%;
        float: left;
      }
    }
    .user-profile {
      font-size: .24rem;
      color: #fff;
      text-align: center;
      .user-name {
        font-size: .32rem;
        margin: .3rem 0 0.2rem;
      }
      .user-id {
        font-size: 0.26rem;
      }
    }
  }
  .operate-panel {
    margin-top: -0.8rem;
    padding: 0.4rem 0.3rem;
    background-color: #fff;
    border-radius: 0.4rem;
    .operate-item {
      height: 1.2rem;
      line-height: 1.2rem;
      // padding: 0 .3rem;
      background: #fff;
      font-size: .32rem;
      color: #333;
      position: relative;
      border-bottom: .01rem solid #eee;
      justify-content: space-between;
      img {
        vertical-align: middle;
        width: .44rem;
        height: .44rem;
        margin: 0 .2rem 0 0.1rem;
      }
      .tel {
        margin-right: .2rem;
        color: #666;
        font-size: .28rem;
      }
      &:after {
        content: '';
        position: absolute;
        width: .44rem;
        height: .44rem;
        right: 0;
        top: 50%;
        margin-top: -0.22rem;
        background: url(../../assets/images/arrow.png);
        background-size: contain;
      }
    }
  }
}

</style>
